<template>
  <!-- <DragFile /> -->
  <!-- 方案一 -->
  <!-- <div class="video_box">
  <div class="video_box">
    <video :src="src" class="video" ref="videoRef" autoplay loop muted></video>
    <div class="box">
      <img src="@/assets/bg.jpg" alt />
      <button @click="onClick">底部按钮的点击</button>
      <a-modal v-model:visible="visible">
        <video :src="src2" class="video" autoplay loop muted></video>
      </a-modal>
      <button class="pause" @click="clickVideo">暂停</button>
      <input placeholder="这是一个输入框" type="text" />
    </div>
  </div> -->

  <!-- style="opacity: 0" -->
  <video :src="src" class="video1" ref="video1" autoplay loop muted></video>
  <!-- 方案二 -->
  <div class="video1_box">
    +
    <canvas width="654" height="368" ref="video1Canvas"></canvas>
    <div class="box">
      <img src="@/assets/bg.jpg" alt />
      <button @click="onClick">底部按钮的点击</button>
      <a-modal v-model:visible="visible">
        <video :src="src2" class="video" autoplay loop muted></video>
      </a-modal>
      <button class="pause" @click="clickVideo">暂停</button>
      <input placeholder="这是一个输入框" type="text" />
    </div>
  </div>

  <div id="test"></div>
</template>

<script setup>
import { onMounted, ref, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import DragFile from "./DragFile.vue";

const src = ref(require("@/assets/video/video.mp4"));
const src2 = ref(require("@/assets/video.mp4"));

const videoRef = ref();
const clickVideo = (e) => {
  videoRef.value.pause();
};

const visible = ref(false);

const onClick = () => {
  // alert(223)
  visible.value = !visible.value;
};

const tolerance = 0;
const ctx = ref();
const video1 = ref();
const video1Canvas = ref();
const width = ref();
const height = ref();

onMounted(() => {
  // video1.value = proxy.$refs.video1;
  // video1Canvas.value = proxy.$refs.video1Canvas;
  // ctx.value = video1Canvas.value.getContext("2d");
  // let timer = null;
  // video1.value.addEventListener(
  //   "play",
  //   () => {
  //     width.value = video1.value.videoWidth;
  //     height.value = video1.value.videoHeight;
  //     timer && clearInterval(timer);
  //     timer = setInterval(() => {
  //       draw();
  //     }, 100);
  //   },
  //   false
  // );
  
  window.QCC.init('test')
});

const draw = () => {
  // if (video1.value.paused || video1.value.ended) return;

  ctx.value.drawImage(video1.value, 0, 0, width.value, height.value);
  ctx.value.putImageData(cutout(), 0, 0);
};

const cutout = () => {
  let framedata = ctx.value.getImageData(0, 0, width.value, height.value),
    len = framedata.data.length / 4;
  for (let i = 0; i < len; i++) {
    let r = framedata.data[i * 4 + 0],
      g = framedata.data[i * 4 + 1],
      b = framedata.data[i * 4 + 2];
    if (r >= 91 && g >= 167 && b >= 216) framedata.data[i * 4 + 3] = 0;
  }
  return framedata;
};
</script>

<style lang="less" scoped>
.video_box {
  width: 654px;
  height: 368px;
  margin: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  // mix-blend-mode: screen;

  .video {
    width: 100%;
    height: 100%;
    position: relative;
    // mix-blend-mode: screen;
  }

  .box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    // z-index: -1;
    mix-blend-mode: screen;

    img {
      width: 100%;
      height: 100%;
    }

    button {
      position: absolute;
      top: 100px;
      left: 100px;
      color: red;
    }

    .pause {
      position: absolute;
      top: 200px;
      left: 200px;
    }

    input {
      position: absolute;
      top: 50px;
      left: 10px;
    }

    .a-modal {
      position: absolute;
      top: 10px;
      left: 10px;
    }
  }
}

video::-webkit-media-controls-play-button {
  display: none;
}

.video1_box {
  width: 654px;
  height: 368px;
  margin: auto;
  position: relative;

  canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }

  .box {
    width: 100%;
    height: 100%;
    z-index: 1;

    img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    button {
      position: absolute;
      top: 100px;
      left: 100px;
      color: red;
    }

    .pause {
      position: absolute;
      top: 200px;
      left: 200px;
    }

    input {
      position: absolute;
      top: 50px;
      left: 10px;
    }

    .a-modal {
      position: absolute;
      top: 10px;
      left: 10px;
    }
  }
}
</style>
